﻿
@{
    ViewBag.Title = "Data Admin";
}
@if (!Request.IsAuthenticated ||
    HttpContext.Current.Request.Cookies["_role"] == null ||
    !HttpContext.Current.Request.Cookies["_method"].Value.Contains("DataAdmin"))
{
    Response.Redirect(@Url.Action("Login", "Home"));
}
<script src="~/Scripts/Breezejs/DataAdmin.js"></script>
<style>
    .panel-default > .panel-heading {
        background-color: White;
    }
    .panel-title > a {
        color: #428bca;
    }
    .list-group{
        margin-bottom: 0 ;
    }
    .overflow{
        max-height: 400px;
        overflow: auto;
    }
    

    .disable {
        background-color: #e7e7e7;
    }
    .list-group-item {
        padding: 5px 10px;
    }
    .tooltip-inner {
        max-width: none;
        word-wrap: break-word;
        width: 350px;
        color: black;
        background-color: #e6e6e6;
    }
    .disabled {
        background-color: #e7e7e7;
    }
</style>

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#mncontent">Contents</a></li>
    <li><a data-toggle="tab" href="#mnaccount">Accounts</a></li>
    <li><a data-toggle="tab" href="#mnrole">Roles</a></li>
</ul>
<div class="tab-content" style="height: 575px">
    <div id="mncontent" class="tab-pane fade in active mincon">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            Industry & Function management
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div id="_industry" class="tab-pane fade in active mincon">
                            <div id="mainItem" class="list-group col-md-2">
                                <h4>
                                    <span class="label label-primary">Industry</span>
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#IndustryModal">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.delInd">
                                        <span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </h4>
                                <div data-bind="foreach: Industry" class="overflow">
                                    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getChild">
                                        <span data-bind=" text: Name"></span>

                                    </a>
                                </div>


                            </div>
                            <div id="subItem" class="list-group col-md-2" style="display:none">
                                <h4>
                                    <span class="label label-primary">Function</span>
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#FunctionModal">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.delFunc">
                                        <span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </h4>
                                <div data-bind="foreach: Function" class="overflow">
                                    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getDescription">
                                        <span data-bind=" text: Name"></span>
                                    </a>
                                </div>

                            </div>
                            <div id="itemDescription" class="col-md-8" style="display:none">
                                <h4>
                                    <span class="label label-primary">Description</span>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.Save">
                                        <span class="glyphicon glyphicon-ok"></span> Save
                                    </button>
                                </h4>
                                <textarea data-bind="value: Description" class="form-control" rows="5"></textarea>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            Location management
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="tab-pane">
                            <div id="_country" class="list-group col-md-4">
                                <h4>
                                    <span class="label label-primary">Country</span>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.addCountry">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.delCountry">
                                        <span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </h4>
                                <div data-bind="foreach: Country" class="overflow">
                                    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getProvince">
                                        <span data-bind=" text: Name"></span>
                                    </a>
                                </div>
                            </div>
                            <div id="_provine" class="list-group col-md-4" style="display:none">
                                <h4>
                                    <span class="label label-primary">Province</span>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.addProvince">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.delProvince">
                                        <span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </h4>
                                <div data-bind="template: { name: 'provincelist', foreach: Children }" class="overflow"></div>
                                
                            </div>
                            <div id="_city" class="list-group col-md-4" style="display:none">
                                <h4>
                                    <span class="label label-primary">City</span>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.addCity">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.delCity">
                                        <span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </h4>
                                <div data-bind="template: { name: 'citylist', foreach: Children }" class="overflow">
                                    <a href="javascript:void(0)" class="list-group-item">
                                        <span data-bind=" text: Name"></span>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="mnaccount" class="tab-pane fade in mincon">
        <div id="_acclist" class="list-group col-md-4">
            <div style="margin-bottom:5px; height:30px;">
                <input id="_mailname" data-bind="event: { 'keyup': filter}" class="form-control col-md-7 input-sm" style="width: 58.333333333333336%;float:left" placeholder="Search..." />
                <select id="_status" class="col-md-5 input-sm" data-bind="event: { 'change': filter}">
                    <option value="all">All status</option>
                    <option value="1">Active</option>
                    <option value="0">Wait to approve</option>
                    <option value="2">Disabled</option>
                </select>


            </div>          

            <div class="overflow" style="max-height: 450px;margin-top:10px;width:100%" data-bind="foreach: AccFilter">
                <!-- ko template: Status() == '1' ? '_1' : '' --><!-- /ko -->
                <!-- ko template: Status() == '0' ? '_0' : '' --><!-- /ko -->
                <!-- ko template: Status() == '2' ? '_2' : '' --><!-- /ko -->

            </div>
        </div>

        <!-- ko template: selectAccount() != '' ? '_inf' : '' --><!-- /ko -->

    </div>
    
    <div id="mnrole" class="tab-pane fade in mincon">
        <div id="_rolelist" class="list-group col-md-4">
            <h4>
                <span>Role</span>
                <button type="button" class="btn btn-default btn-xs" data-bind="click: vm.addRole">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
                <button type="button" class="btn btn-default btn-xs" data-bind="click:vm.delRole">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </h4>
            <div class="overflow" style="max-height: 450px;margin-top:10px;" data-bind="foreach: Roles">
                <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getMenu">
                    <span data-bind="text: Name"></span>
                </a> 
            </div>
        </div>
        <div class="col-md-4">
            <h4>Menu</h4>
            <div style="max-height: 450px; margin-top: 10px;" data-bind="foreach: Menus">               
                <a href="javascript:void(0)" class="list-group-item" data-placement="right" data-bind="event: { mouseover: vm.enableDetails}, attr: {title: Description}">
                    <input type="checkbox" /> <span data-bind="text: Name"></span>
                </a>

            </div>
        </div>
    </div>
    </div>








<div class="modal fade" id="IndustryModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">New Industry</h4>
            </div>
            <div class="custom-modal-body">
                <table class="table infotable">
                    <tr>
                        <td><label class="control-label">Name</label></td>
                        <td><input id="IMName" class="form-control" placeholder="Industry Name"></td>
                    </tr>
                    <tr>
                        <td><label class="control-label">Description</label></td>
                        <td><textarea id="IMDescription" class="form-control" style="min-height:300px" placeholder="Industry Description"></textarea></td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="addParent()">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="FunctionModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add new function in <span data-bind="text: IndustryName"></span></h4>
            </div>
            <div class="custom-modal-body">
                <table class="table infotable">
                    <tr>
                        <td><label class="control-label">Name</label></td>
                        <td><input id="FMName" class="form-control" placeholder="Function Name"></td>
                    </tr>
                    <tr>
                        <td><label class="control-label">Description</label></td>
                        <td><textarea id="FMDescription" class="form-control" style="min-height:300px" placeholder="Function Description"></textarea></td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="addChild()">Ok</button>
            </div>
        </div>
    </div>
</div>


<!--Template area-->

<script type="text/html" id="provincelist">
    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getCity">
        <span data-bind=" text: Name"></span>
    </a>
</script>
<script type="text/html" id="citylist">
    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.cityselect">
        <span data-bind=" text: Name"></span>
    </a>
</script>


<script id="_1" type="text/html">
    <a href="javascript:void(0)" class="list-group-item" data-bind="click: vm.getInf">
        <span data-bind="text: Email"></span>
    </a>
</script>
<script id="_2" type="text/html">
    <a href="javascript:void(0)" class="list-group-item disabled" data-bind="click: vm.getInf" title="Account is disabled">
        <span data-bind="text: Email"></span>
        <span class="glyphicon glyphicon-ban-circle"></span>
    </a>
</script>
<script id="_0" type="text/html">
    <a href="javascript:void(0)" class="list-group-item disabled" data-bind="click: vm.getInf" title="Wait to approve">
        <span data-bind="text: Email"></span>
        <span class="glyphicon glyphicon-remove-circle"></span>
    </a>
</script>

<script id="_inf" type="text/html">
    <div id="_infor" class="col-md-8">
        <h4></h4>
        <div style="max-height: 450px; margin-top: 10px;">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-xs-2">Full Name</label>
                    <div class="col-xs-10">
                        <span class="form-control" data-bind="text: selectAccount().PersonalInfor().Name"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">Email</label>
                    <div class="col-xs-10">
                        <span class="form-control" data-bind="text: selectAccount().Email"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">Role</label>
                    <div class="col-xs-10">
                        <span class="form-control" data-bind="text: selectAccount().Role().Name"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">Status</label>
                    <div class="col-xs-10">
                        <!-- ko template: selectAccount().Status() == 0 ? '_s0' : '' --><!-- /ko -->
                        <!-- ko template: selectAccount().Status() == 1 ? '_s1' : '' --><!-- /ko -->
                        <!-- ko template: selectAccount().Status() == 2 ? '_s2' : '' --><!-- /ko -->

                    </div>


                </div>

                <div class="form-group">
                    <label class="control-label col-xs-2">Command</label>
                    <div class="col-xs-10">
                        <!-- ko template: selectAccount().Status() == 0 || selectAccount().Status() == 2 ? '_enable' : '_disable' --><!-- /ko -->                      
                        <button type="button" class="btn btn-default btn-sm" title="Change password to default">
                            <span class="glyphicon glyphicon-retweet"></span> Reset password
                        </button>
                        <span id="_load" style="display:none">
                            <img style="height: 50px; width: 50px" src="/Content/loading.gif" />
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</script>
<script id="_enable" type="text/html">
    <button type="button" data-bind="click:vm.enable" class="btn btn-default btn-sm" title="Change status from 'Wait to approve' or 'Disabled' -> 'Active'">
        <span class="glyphicon glyphicon-ok-circle"></span> Approve/ Enable
    </button>
</script>
<script id="_disable" type="text/html">
    <button type="button" data-bind="click:vm.disable" class="btn btn-default btn-sm" title="Block this account">
        <span class="glyphicon glyphicon-ban-circle"></span> Disable
    </button>
</script>


<script id="_s0" type="text/html">
    <span class="form-control">Wait to approve</span>
</script>
<script id="_s1" type="text/html">
    <span class="form-control">Active</span>
</script>
<script id="_s2" type="text/html">
    <span class="form-control">Disable</span>
</script>